<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="650px"
      @closed="closed"
    >
          <el-form ref="relayForm"  :model="relayForm" label-width="110px" :rules="rules">

            <el-form-item label="ip" prop="ip">
              <el-input v-model="relayForm.ip" placeholder="请输入IP" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="stunPort" prop="stunPort">
              <el-input v-model="relayForm.stunPort" placeholder="请输入Port" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="turnPort" prop="turnPort">
              <el-input v-model="relayForm.turnPort" placeholder="请输入Port" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="username" prop="username">
              <el-input v-model="relayForm.username" placeholder="请输入账号" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="password" prop="password">
              <el-input v-model="relayForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="启用">
              <el-switch
                v-model="relayForm.enabled"
                active-value="1"
                inactive-value="0"
                >
              </el-switch>
            </el-form-item>

          </el-form>

      <div style="text-align: right;">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveServer,
    getServerById
  } from '@/api/cloud/server'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'RelayDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.relayForm.id = value.data.id || ''
          } else {
            this.relayForm.id =''
          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '新增'
            }
            if (value.type === '1') {
              this.title = '编辑'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.getServerById();
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        relayForm:{
          id:'',
          name:'中继服务',
          type:'relay',
          enabled:"0",
          ip:"",
          stunPort:"",
          turnPort:"",
          username:"",
          password:""
        },
        rules: {
          ip: [{
            required: true,
            message: '请输入IP',
            trigger: 'blur'
          }],
          stunPort: [{
            required: true,
            message: '请输入端口',
            trigger: 'blur'
          }],
          turnPort: [{
            required: true,
            message: '请输入端口',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        }
      }
    },
    methods:{
      getServerById(){
        this.loading=true
        getServerById({
          id: this.relayForm.id,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result
            this.relayForm.id=_data.id;
            this.relayForm.enabled=_data.enabled;
            this.relayForm.type=_data.type;
            const _config=JSON.parse(_data.config);
            this.relayForm.ip=_config?_config.ip:'';
            this.relayForm.stunPort=_config?_config.stunPort:'';
            this.relayForm.turnPort=_config?_config.turnPort:'';
            this.relayForm.username=_config?_config.username:'';
            this.relayForm.password=_config?_config.password:'';
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      submitForm: function() {
        this.$refs.relayForm.validate((valid) => {
          if (valid) {
            this.loading = true
            var form={
              id:this.relayForm.id,
              name:this.relayForm.name,
              enabled:this.relayForm.enabled,
              type:this.relayForm.type,
              config:{
                ip:this.relayForm.ip,
                stunPort:this.relayForm.stunPort,
                turnPort:this.relayForm.turnPort,
                username:this.relayForm.username,
                password:this.relayForm.password,
              }
            };
            saveServer(form).then(rsp => {
              this.$message({
                type: 'success',
                message:rsp.message
              })
              this.closed()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style>
</style>
